<template>
  <div class="menu-test-page">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <span>动态菜单系统测试</span>
          <el-button type="primary" @click="refreshMenu">刷新菜单</el-button>
        </div>
      </template>

      <!-- 用户信息 -->
      <el-descriptions title="当前用户信息" :column="2" border>
        <el-descriptions-item label="用户ID">{{ userStore.userInfo.userId }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ userStore.userInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ userStore.userInfo.realName || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar :src="userStore.userInfo.avatar" :size="32">
            {{ userStore.userInfo.username?.charAt(0)?.toUpperCase() }}
          </el-avatar>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 权限信息 -->
      <el-divider content-position="left">权限信息</el-divider>
      <div class="permissions-section">
        <h4>用户权限 ({{ menuStore.permissions.length }}个)</h4>
        <el-tag 
          v-for="permission in menuStore.permissions" 
          :key="permission" 
          class="permission-tag"
          type="success"
        >
          {{ permission }}
        </el-tag>
      </div>

      <div class="roles-section">
        <h4>用户角色 ({{ menuStore.roles.length }}个)</h4>
        <el-tag 
          v-for="role in menuStore.roles" 
          :key="role" 
          class="role-tag"
          type="warning"
        >
          {{ role }}
        </el-tag>
      </div>

      <!-- 菜单树信息 -->
      <el-divider content-position="left">菜单树结构</el-divider>
      <div class="menu-tree-section">
        <el-tree
          :data="treeData"
          :props="treeProps"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="tree-node">
              <el-icon v-if="data.icon">
                <component :is="getIconComponent(data.icon)" />
              </el-icon>
              <span class="node-label">{{ data.name }}</span>
              <el-tag size="small" :type="getTypeTag(data.type)">
                {{ getTypeText(data.type) }}
              </el-tag>
              <el-tag size="small" type="info" v-if="data.path">
                {{ data.path }}
              </el-tag>
            </span>
          </template>
        </el-tree>
      </div>

      <!-- 权限测试 -->
      <el-divider content-position="left">权限控制测试</el-divider>
      <div class="permission-test-section">
        <el-space wrap>
          <!-- 单个权限测试 -->
          <el-button v-permission="'system'" type="primary">
            系统管理权限按钮
          </el-button>
          
          <el-button v-permission="'user:add'" type="success">
            用户添加权限按钮
          </el-button>
          
          <el-button v-permission="'menu:edit'" type="warning">
            菜单编辑权限按钮
          </el-button>
          
          <!-- 多权限测试（任意一个） -->
          <el-button v-permission="['user:edit', 'user:delete']" type="danger">
            用户编辑或删除权限按钮
          </el-button>
          
          <!-- 角色测试 -->
          <el-button v-role="'ADMIN'" type="info">
            管理员角色按钮
          </el-button>
          
          <el-button v-role="'SUPER_ADMIN'" type="primary">
            超级管理员角色按钮
          </el-button>
        </el-space>
      </div>

      <!-- API测试 -->
      <el-divider content-position="left">API测试</el-divider>
      <div class="api-test-section">
        <el-space>
          <el-button @click="testCurrentUserMenu" :loading="testing">
            测试获取当前用户菜单
          </el-button>
          <el-button @click="testAllMenuTree" :loading="testing">
            测试获取所有菜单树
          </el-button>
          <el-button @click="runAllTests" :loading="testing">
            运行所有测试
          </el-button>
        </el-space>
      </div>

      <!-- 面包屑测试 -->
      <el-divider content-position="left">面包屑导航</el-divider>
      <div class="breadcrumb-section">
        <p>当前页面面包屑：</p>
        <Breadcrumb />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useMenuStore } from '@/stores/menu'
import { menuAPI } from '@/api/menu'
import { getIconComponent } from '@/utils/iconMap'
import Breadcrumb from '@/components/Breadcrumb.vue'

const userStore = useUserStore()
const menuStore = useMenuStore()
const testing = ref(false)

// 树形数据配置
const treeProps = {
  children: 'children',
  label: 'name'
}

// 转换菜单数据为树形结构
const treeData = computed(() => {
  return menuStore.menuTree.map(menu => ({
    ...menu,
    children: menu.children || []
  }))
})



// 获取类型标签
const getTypeTag = (type) => {
  const typeMap = {
    1: 'primary',  // 菜单
    2: 'success',  // 按钮
    3: 'warning'   // API
  }
  return typeMap[type] || 'info'
}

// 获取类型文本
const getTypeText = (type) => {
  const typeMap = {
    1: '菜单',
    2: '按钮',
    3: 'API'
  }
  return typeMap[type] || '未知'
}

// 刷新菜单
const refreshMenu = async () => {
  try {
    testing.value = true
    await menuStore.getCurrentUserMenu()
    ElMessage.success('菜单刷新成功')
  } catch (error) {
    ElMessage.error('菜单刷新失败')
  } finally {
    testing.value = false
  }
}

// 测试获取当前用户菜单
const testCurrentUserMenu = async () => {
  try {
    testing.value = true
    const result = await menuAPI.getCurrentUserMenu()
    console.log('当前用户菜单测试结果:', result)
    if (result.success) {
      ElMessage.success('获取当前用户菜单成功')
    } else {
      ElMessage.error(result.message || '获取失败')
    }
  } catch (error) {
    console.error('测试失败:', error)
    ElMessage.error('测试失败')
  } finally {
    testing.value = false
  }
}

// 测试获取所有菜单树
const testAllMenuTree = async () => {
  try {
    testing.value = true
    const result = await menuAPI.getAllMenuTree()
    console.log('所有菜单树测试结果:', result)
    if (result.success) {
      ElMessage.success('获取所有菜单树成功')
    } else {
      ElMessage.error(result.message || '获取失败')
    }
  } catch (error) {
    console.error('测试失败:', error)
    ElMessage.error('测试失败')
  } finally {
    testing.value = false
  }
}

// 运行所有测试
const runAllTests = async () => {
  try {
    testing.value = true
    
    // 使用测试工具运行所有测试
    if (window.menuTest) {
      await window.menuTest.runAllTests()
      ElMessage.success('所有测试完成，请查看控制台')
    } else {
      ElMessage.warning('测试工具未加载')
    }
  } catch (error) {
    console.error('测试失败:', error)
    ElMessage.error('测试失败')
  } finally {
    testing.value = false
  }
}
</script>

<style scoped>
.menu-test-page {
  padding: 20px;
}

.test-card {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.permissions-section,
.roles-section {
  margin: 20px 0;
}

.permission-tag,
.role-tag {
  margin: 4px;
}

.menu-tree-section {
  margin: 20px 0;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 10px;
}

.tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.node-label {
  font-weight: 500;
}

.permission-test-section {
  margin: 20px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 4px;
}

.api-test-section {
  margin: 20px 0;
  padding: 20px;
  background: #f0f9ff;
  border-radius: 4px;
}

.breadcrumb-section {
  margin: 20px 0;
  padding: 20px;
  background: #fff7e6;
  border-radius: 4px;
}

h4 {
  margin: 10px 0;
  color: #333;
}
</style>